import React, { useContext, useEffect, useState } from 'react';
import { TouchableOpacity, View } from 'react-native';
import { ListItem, CheckBox } from 'react-native-elements';

import LocaleContext from '../libs/locale';

const Language = ({ setLang }: any) => {
  const locale = useContext(LocaleContext);
  const [language, setLanguage] = useState(locale?.lang);

  const onSet = async (lang: string) => {
    setLanguage(lang);
    await setLang(lang);
  };

  return (
    !language ? <></> :
      <View>
        <TouchableOpacity activeOpacity={1} onPress={()=>onSet('zh')}>
        <ListItem bottomDivider>
          <CheckBox
            center
            checkedIcon='dot-circle-o'
            uncheckedIcon='circle-o'
            size={18}
            checked={language === 'zh'}
            containerStyle={{ margin: 0, padding: 0 }}
            checkedColor='#7460E3FF'
            onPress={() => onSet('zh')}
          />
          <ListItem.Content>
            <ListItem.Title>{locale?._('My.language.zh')}</ListItem.Title>
          </ListItem.Content>
        </ListItem>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={1} onPress={()=>onSet('en')}>
        <ListItem bottomDivider>
          <CheckBox
            center
            checkedIcon='dot-circle-o'
            uncheckedIcon='circle-o'
            size={18}
            checked={language === 'en'}
            containerStyle={{ margin: 0, padding: 0 }}
            checkedColor='#7460E3FF'
            onPress={() => onSet('en')}
          />
          <ListItem.Content>
            <ListItem.Title>{locale?._('My.language.en')}</ListItem.Title>
          </ListItem.Content>
        </ListItem>
        </TouchableOpacity>
      </View>
  );
};

export default Language;
